<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<style>
			/*1.控制字体：font-family指定字体家族属性*/
			{
				/*免费：微软雅黑，楷体，sans-serif‘无衬线字体’等同于黑体，宋体..*/
				font-family: 微软雅黑,sans-serif;
				/*用户电脑存在字体，按照顺序选择执行，二选一，就近原则*/
			    /*font-size: 字体尺寸属性：px：绝对值--pc  em：相对于父元素字体倍数调整--移动端*/
			    font-size: 1.5em;
				/*font-weight字体加粗属性   属性值：数值【整数】  100 细~900 粗
												  英文       normal=400，bold=900
				*/
			   font-weight: 900;
			   /*font-style字体样式属性*/
			   font-style: italic;
			   /*text-transform字体的转换属性:属性值 uppercase 转大写
												    lowercase 转小写
													capitalize 首字符转大写
			   */
			   text-transform: uppercase;
			   text-transform: lowercase;
			   text-transform: capitalize;
			   /*text-indent 文本块首行缩进属性：属性值 数值px*/
			   text-indent: 200px;
			}
			/*2.控制文本布局*/
			h 1+p{
				border: 1px solid red;
				/*text-align文本对齐属性：属性值：left/right/center[空间宽度]
				                                justify  两端对齐[文本占满空间]
												针对文本左右布局*/
				text-align: center;
				text-align: justify;
				/*line-height行高属性：属性值：数值px  针对文本行高*/
				height: 40px;
				line-height: 40px;
				/*文本垂直居中：高度与行高一致*/
				/*letter-spacing字符间距属性：属性值 [正负]数值px*/
				letter-spacing: -1px;
				/*word-spacing单词间距属性：属性值  [正负]数值px*/
				wor d-spacing: 10px;
			}
			/*3.文本装饰效果*/
			p a{
				border: 1px solid #ababab;
				padding: 6px 10px;
				border-radius: 3px;
				margin-left: 10px;
				
			}
			/*默认效果：去边框，去下划线去掉*/
			p a.current{
				border: 0;
				/*text-decoration超链接效果属性：属性值 none 去掉下划线
													underline 默认下划线
													line-through 删除线
				*/
				text-decoration: none;
				text-decoration: underline;
				text-decoration: line-through;
				color: #000;
			}
			p>span{
				bor der: 1px solid red;
				/*text-shadow文本阴影属性     阴影：1.滤镜：下阴影 2.文本阴影 3.盒子阴影*/
				/*       属性值：x y 模糊距离 颜色  */
				text-shadow: 5px 5px 10px #ffff00 ;
			}
			/*4.文本换行属性*/
			h1~span{
				border: 1px solid red;
				/*white-space文本换行属性：nowrap 一行显示，添加回车，显示效果：存在空格
				                          pre    保留空格与回车
										  normal 默认 空格合并，自动换行
										  
				*/
				wh ite-space: nowrap;
				wh ite-space: pre;
				white-space: normal;
			}
		</style>
	</head>
	<body>
		<!--文本格式化属性：针对文本和字体，四种效果：
		    1.控制字体：font-family，font-size，font-weight等
			2.控制文本布局：text-align，line-height，letter-spacing等
			3.文本装饰效果：text-decoration，text-shadow等
			4.文本溢出和换行：overflow，white-space.
		-->
		<h1>文本格式化属性：控制字体</h1>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni libero labore consequuntur soluta, dolores eos a? Consectetur velit, commodi possimus quos harum quia sed aspernatur debitis dolores aut sapiente consequuntur!
	     <h1>控制文本布局：文本</h1>
	     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime dolore excepturi odit necessitatibus labore adipisci similique culpa quam expedita porro dolorum possimus, quis error delectus at optio quaerat autem corrupti!</p>
	     <h1>文本装饰效果</h1>
		<p>
			<a href="#" class="current">1</a>
			<a href="#">2</a>
			<a href="#">3</a>
			<a href="#">4</a>
			<a href="#">5</a>
			<a href="#">6</a>
			<span>测试文本阴影</span>
		</p>
		<h1>文本的换行属性</h1>
		<span>L     ore
		m ipsum do      lor sit amet consectetur adipisicing elit. Modi quod pariatur mollitia, facere amet, laborum delectus, veritatis quidem consectetur obcaecati debitis voluptas? Amet nemo doloremque sunt aut? Corrupti, quaerat quam.</span>
	</body>
</html>